<template>
  <NavBar />
  <van-collapse v-model="activeNames">
    <van-collapse-item title="学科" name="1" :value="subjectName" icon="shop-o">
      <van-grid :column-num="4" clickable>
        <van-grid-item v-for="item in dictData" :key="item.dictValue" :text="item.dictLabel" @click="changeSubjectHandle(item)" />
      </van-grid>
    </van-collapse-item>
  </van-collapse>

  <!-- 模拟试卷-->
  <van-cell v-for="item in paperList" :title="item.paperName" is-link @click="toQuestionHandle(item.id)" />

</template>

<script>
import NavBar from "@/components/layout/nav-bar";
import { onBeforeMount, reactive,ref,toRefs } from "vue"
import { useStore } from "vuex"
import { useRouter } from "vue-router"
import http from "@/utils/http";
import { Toast } from "vant"
export default {
  name: "simulation",
  components: {
    NavBar
  },

  setup() {
    const store = useStore();
    const router = useRouter();
    const activeNames = ref(['1']);
    const state = reactive({
      dictData: store.state.dictData,
      subjectName: "请选择",
      paperList: []
    })

    onBeforeMount(()=>{
      // console.log(store.state.preferenceSetting)
      // if (store.state.preferenceSetting.subjectName){
      //   state.subjectName = store.state.preferenceSetting.subjectName
      // }else {
      //   state.subjectName = state.dictData[0].dictLabel
      // }
    })

    const changeSubjectHandle = ((item)=>{
      activeNames.value = []
      // store.commit("updateState", { preferenceSetting: { subjectName: item.dictLabel,subjectId: item.dictValue } });
      // console.log(store.state.preferenceSetting)
      state.subjectName = item.dictLabel;
      http.get("exam/paper/list",{ params:{ paperType: 1, dictDataId: item.dictId }}).then(({ data: res})=>{
        if (res.code !==0){
          return Toast.fail(res.msg)
        }
        state.paperList = res.data
      })
    })

    const toQuestionHandle = ((id)=>{
      console.log(id)
      router.push({ name: 'question', params: { id: id, examType: "SIMULATION" } })
    })

    return {
      activeNames,
      ...toRefs(state),
      changeSubjectHandle,
      toQuestionHandle
    };
  },
}
</script>

<style scoped>

</style>
